<template>
  <BaseMainSlot :show-tab="true">
    <template v-slot:search-box>
      <div class="searchbox-container">
        <div class="searchbox two">
          <div class="select-box-content one">
            <div class="select-box-content-name">上传人：</div>
            <el-select
              v-model="personNo"
              clearable
              placeholder="请输入上传人"
              @change="queryPageList()"
            >
              <el-option
                v-for="item in personList"
                :key="item.personNo"
                :label="item.person.name"
                :value="item.personNo"
              />
            </el-select>
          </div>
        </div>
        <div class="searchbox two">
          <div class="select-box-content one">
            <div class="select-box-content-name">上传日期：</div>
            <el-date-picker
              v-model="uploadDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              @change="queryPageList()"
            />
          </div>
        </div>
        <div class="searchbox two">
          <div class="select-box-content one">
            <div class="select-box-content-name">批次名称：</div>
            <el-input
              v-model="batchName"
              clearable
              placeholder="请输入报告关联的批次"
              @change="queryPageList()"
            />
          </div>
        </div>
        <div class="searchbox two">
          <div class="select-box-content one">
            <div class="select-box-content-name">批次编号：</div>
            <el-input
              v-model="batchNo"
              clearable
              placeholder="请输入批次编号"
              @change="queryPageList()"
            />
          </div>
        </div>

        <div class="page-top__todo">
          <CommonBtn @click="queryPageList">查询</CommonBtn>
        </div>
      </div>
    </template>
    <template v-slot:btn-box>
      <div class="page-top__todo">
        <CommonBtn @click="reload">刷新</CommonBtn>
        <CommonBtn @click="changeShowDialog('add')">添加</CommonBtn>
        <CommonBtn :disabled="!delActive" @click="del">删除</CommonBtn>
      </div>
    </template>
    <template v-slot:table-box>
      <tdtable
        v-loading="tableLoading"
        :page="page"
        :prop-list="propList"
        :table-data="tableData"
        :show-index-column="true"
        :show-select-column="true"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:uploadDate="{ row }">
          <span v-if="row.uploadDate">{{ dateToFormattwo(row.uploadDate) }}</span>
        </template>
        <template v-slot:reportFileList="{ row }">
          <span v-if="row.productReportId">
            <el-button class="text-btn-cursor" type="text" size="small" @click="toShowPreImgs(row.reportFileList)"> 查看详情 </el-button>
          </span>
        </template>
        <template v-slot:edit="{ row }">
          <div
            v-if="row.productReportId"
            class="operate"
          >
            <el-button
              type="text"
              class="text-btn-cursor"
              size="small"
              @click="changeShowDialog('edit',row)"
            >修改</el-button>
            <el-button
              type="text"
              class="text-btn-cursor cursor-delete"
              size="small"
              @click="handleDelete(row.productReportId)"
            >删除</el-button>
          </div>
        </template>
      </tdtable>
      <addImage
        ref="addImage"
        :title-text="titletext + '检测报告'"
        :show="show"
        :person-list="personList"
        @closeDialog="closeDialog"
        @addPicture="save"
      />
      <ImgPreviewDialog v-model="showImagesDialog" :list="preImgList" :loading="showImagesDialogLoading" />

    </template>
  </BaseMainSlot>
</template>
<script>
import BaseMainSlot from '@/components/BaseMainSlot/newBaseMainSlot.vue';
import addImage from './components/add-image-dialog.vue';
import tdtable from '@/components/table/index.vue';
import ImgPreviewDialog from './components/img-preview-dialog.vue';
import { mymixin } from '@/utils/mixin';
import processTaskApi from '@/api/processing-management/process-management/processing-task';
import QualityManage from '@/api/processing-management/quarity-manage';
import CommonFileApi from '@/api/common-file';
import axios from 'axios';
export default {
  name: 'ProductTestReport',
  components: { BaseMainSlot, addImage, tdtable, ImgPreviewDialog },
  mixins: [mymixin],
  inject: ['reload'],
  data() {
    return {
      moduleType: 'PROCESSTEST',
      upDownType: 'FTP',
      titletext: '添加',
      personList: [],
      recordDataList: [],
      editobj: {},
      personNo: '',
      batchName: '',
      batchNo: '',
      pageSize: 4,
      currentPage: 1,
      totalSize: 0,
      srcList: [],
      name: 'xxx',
      uploadDate: '',
      show: false,
      tableLoading: false,
      showImagesDialog: false,
      preImgList: [],
      selectedList: [],
      showImagesDialogLoading: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      propList: [
        { prop: 'uploadDate', label: '上传日期', minWidth: '100',
          slotName: 'uploadDate' },
        { prop: 'name', label: '上传人', minWidth: '110' },
        { prop: 'batchName', label: '所属批次', minWidth: '100' },
        {
          prop: 'batchNo',
          label: '批次编号',
          minWidth: '100'
        },
        {
          prop: 'productName',
          label: '产品名称',
          minWidth: '100'
        },
        {
          prop: 'reportFileList',
          label: '报告图片',
          minWidth: '100',
          slotName: 'reportFileList'
        },
        { label: '操作', minWidth: '200', slotName: 'edit' }
      ]
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.queryPageList();
    this.getPersonOptions();
  },
  methods: {
    // 获取作业人数组
    getPersonOptions() {
      processTaskApi.personQuery().then(res => {
        if (res.code === 1) {
          this.personList = res.data;
        }
      });
    },
    async toShowPreImgs(list) {
      this.preImgList = [];
      if (list && list.length > 0) {
        const { upDownType, moduleType } = this;
        this.showImagesDialog = true;
        this.showImagesDialogLoading = true;
        list.forEach(async item => {
          this.preImgList.push({
            name: item.fileName,
            url: CommonFileApi.getFileUrl({ upDownType, moduleType, fileId: item.fileId })
          });
        })
        this.showImagesDialogLoading = false;
      } else {
        this.$message.warning('暂无图片');
        return false;
      }
    },

    async makePdf(url) {
      // 把孙悟空替换为了猪八戒
      var newstr = url.replace(/%26/g, "&");
      //  console.log(newstr);
      let res = await axios.get(newstr, { responseType: 'blob' })
      const { data, status } = res;
      let binaryData = []
      binaryData.push(data)// res 后台返回的流数据
      let pdfUrl = ''
      pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
      return pdfUrl;
    },
    del() {
      this.handleDelete(this.selectedList);
    },
    handleDelete(no) {
      let list = [no];
      if (no instanceof Array) {
        list = no;
      }
      this.$confirm('是否确认删除？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonClass: 'btnFalses',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          QualityManage.del({ productReportIdList: list }).then(res => {
            if (res.code === 1) {
              this.$message.success('删除成功');
              this.queryPageList();
            } else {
              this.$message.error('删除失败');
            }
          });
        })
        .catch(action => {});
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.search();
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.search();
    },
    handleSelectionChange(list) {
      this.selectedList = list.map(item => {
        return item.productReportId;
      });
      if (this.selectedList && this.selectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    queryPageList() {
      const { currentPage, pageSize } = this.page;
      let param = {
        page: currentPage,
        size: pageSize,
        entity: {
          personNo: this.personNo || void 0,
          uploadDate: this.uploadDate || void 0,
          batchName: this.batchName || void 0,
          batchNo: this.batchNo || void 0
        }
      };
      QualityManage.queryPageList(param).then(async res => {
        this.srcList = [];
        if (res.code === 1) {
          this.tableData = this.$utils.addblankmet(res.data.content, pageSize);

          this.totalSize = res.data.totalElements;
          // console.log(this.recordDataList);
        }
      });
    },
    changeShowDialog(nowChanceStau, row) {
      this.editobj = {};
      this.nowChanceStau = nowChanceStau;
      if (nowChanceStau === 'edit') {
        // this.editobj = row;
        this.titletext = '修改'
        let obj = JSON.parse(JSON.stringify(row));
        let list = [];
        if (row.reportFileList && row.reportFileList.length > 0) {
          const { upDownType, moduleType } = this;
          row.reportFileList.forEach(async item => {
            list.push({
              ...item,
              name: item.fileName,
              url: CommonFileApi.getFileUrl({ upDownType, moduleType, fileId: item.fileId })
            });
          })
        }
        this.$set(obj, 'reportFileList', list);
        this.$set(obj, 'uploadDate', this.dateToFormattwo(row.uploadDate));
        this.$refs.addImage.edit(obj)
      } else if (nowChanceStau === 'add') {
        this.titletext = '添加'
        this.editobj = {};
      }
      this.show = true;
    },
    closeDialog() {
      this.show = false;
      this.nowChanceStau = ''
    },
    changePageSize(e) {
      this.pageSize = e;
      this.queryPageList();
    },
    changeCurrentPage(e) {
      this.currentPage = e;
      this.queryPageList();
    },
    save(formData) {
      if (this.nowChanceStau === "add") {
        QualityManage.add(formData).then(res => {
          this.queryPageList();
        });
      } else if (this.nowChanceStau === "edit") {
        QualityManage.edit(formData).then(res => {
          this.queryPageList();
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';
.one {
  display: flex;
  align-items: center;
}
.two {
  margin-right: 30px;
}
.select-box-content-name {
  min-width: 90px;
}
.searchbox-container {
  padding: 10px 30px;
  width: 100%;
  background-color: #00485a;
  display: flex;
  position: relative;
  .page-top__todo {
    position: absolute;
    right: 0;
    top: 5px;
  }
}
.ImageShow {
  display: flex;
  justify-content: space-around;
  .ImageItem {
    padding: 16px;
    width: 346px;
    height: 536px;
    border: 1px solid #266573;
    .img {
      width: 320px;
      height: 435px;
    }
    .text {
      height: 58px;
      margin-top: 18px;
      border-top: 1px dashed #266573;
      .text-item {
        height: 35%;
        display: flex;
        align-items: center;
        padding-top: 18px;
        i {
          color: #57e3e6;
        }
        p {
          span {
            display: inline-block;
            width: 70px;
          }
          margin: 0px;
          color: #eef2f3;
          font-size: 13px;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
